<script setup>
import { ref, onMounted } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { deviceListServer } from '@/api'
const list = ref([
  {
    companyName: '设施一',
    riseLandPointType: '类型一',
    riseLandPointName: '单位一'
  },
  {
    companyName: '设施二',
    riseLandPointType: '类型二',
    riseLandPointName: '单位二'
  },
  {
    companyName: '设施三',
    riseLandPointType: '类型三',
    riseLandPointName: '单位三'
  },
  {
    companyName: '设施三',
    riseLandPointType: '类型三',
    riseLandPointName: '单位三'
  }
])
//获取空域资源
const getDeviceList = async () => {
  const res = await deviceListServer()
  list.value = res.data
  console.log('listxxxx:', list)
}

onMounted(() => {
  getDeviceList()
})
</script>
<template>
  <div class="card">
    <CommonTitle title="起降设施列表" />
    <div class="table">
      <ul class="thead">
        <li>设施名称</li>
        <li>起降点类型</li>
        <li>运营单位</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="list"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :delay="3"
          :limitScrollNum="4"
        >
          <li v-for="(item, index) in list" :key="index">
            <p>
              <span class="riseLandPointName">{{ item.riseLandPointName }}</span>
            </p>
            <p>
              <span class="riseLandPointType">{{ item.riseLandPointType }}</span>
            </p>
            <p>
              <span class="riseLandPointName">{{ item.companyName || '-' }}</span>
            </p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  margin-top: 15px;

  .table {
    width: 100%;
    padding: 10px;

    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;
      }
    }

    .tbody {
      height: 175px;
      overflow: hidden;

      li {
        display: flex;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;

        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }

        P {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .riseLandPointType {
            width: 67px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(0, 213, 255, 0.25);
            border-radius: 2px;
            border: 1px solid #00d5ff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 60px;
          }
          .riseLandPointName {
            width: 100px;
            overflow: hidden;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
